let query = {
  catename:'',
  page:1,
  limit:10,
}

layui.use(['laydate','table'],function(){
  var layer = layui.layer;
  var laydate = layui.laydate;
  var form = layui.form;
  var $ = layui.$;
  var table = layui.table;
  var laypage = layui.laypage;

 
    // 渲染
// async function render(){
//  const {data:{data}} = await axios.get('ydd_cate/list',{params:query})
//   console.log(data)
//   renderPage(data.length)
//  const newdata = data.map((item,index)=>{
//     return  {id: item.id, catename: item.catename, icon: item.icon, sort_num: item.sort_num, default_data: item.default_data,index:index+1}
//   })
//     //表格渲染
//   table.render({
//     elem: '#table-lj',
//    data:newdata, // 此处为静态模拟数据，实际使用时需换成真实接口
//     defaultToolbar: '',
//     toolbar: '#toolBarDemo1',
//     cols: [function(){
//       var arr = [
//         {field:'index', title:'#',},
//         {field:'id', title:'分类ID',},
//         {field:'catename', title:'分类名称', },
//         {field:'icon', title:'图标class',toolbar:'#imgTpl', },
       
//         {field:'sort_num', title:'权重', } ,
//         {field:'operate', title:'操作',toolbar: `#toolBarDemo2`, } ,
//       ];
      
//       // 初始化筛选状态
//       var local = layui.data('table-filter-test'); // 获取对应的本地记录
//       layui.each(arr, function(index, item){
//         if(item.field in local){
//           item.hide = local[item.field];
//         }
//       });
//       return arr;
//     }() ],  
//     done: function(){
//       // 记录筛选状态
//       var that = this;
//       that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
//         var input = $(this).prev()[0];
//         // 此处表名可任意定义
//         layui.data('table-filter-test', {
//           key: input.name
//           ,value: input.checked
//         })
//       });
//     }
    
//   });

//   //删除功能  
// $('.layui-table-box').on('click','#delbtn',function(){
//   axios.get('ydd_cate/del',{params:{id:$(this).attr('data-id')}})
//   .then((res) => {
//     // console.log(res.data);
//     if(res.data.errno===1000){
//       layer.msg(res.data.errmsg)
//       return
//     }
//     layer.msg('删除成功')
//     render()
//   })
//   })
//   //编辑
// $('.layui-table-box').on('click','#editbtn',function(){

//   axios.post('ydd_article/update')
//   .then(res => {
//     console.log(res)
//   })
// })
// //新增
// $('#addItem').on('click',function(){

// })
//   let flag = true;
//     $('#formChange').on('click',function(){
//     if(flag){
//       $('#form-lj').hide();
//       $('#formChange').css('transform', 'rotate(180deg)')
//       flag = false;
//     }else{
//       $('#form-lj').show();
//       $('#formChange').css('transform', 'rotate(0deg)')
//       flag = true;
//     }
//     })
//     $('#refresh').on('click',function(){
//          location.reload()
//       // table.reload('table-lj', {
//       //   where: { // 传递数据异步请求时携带的字段
//       //    data: data.data
//       //   }
        
//       // })
//     }) 

// }
// render()
function rendercate(){
  axios.get('ydd_cate/list',{params:query})
.then(({data:{data}})=> {
  // console.log(data)
  renderPage(data.count)
  const newdata = data.data.map((item,index)=>{
    return  {id: item.id, catename: item.catename, icon: item.icon, sort_num: item.sort_num, default_data: item.default_data,index:index+1}
  })
    //表格渲染
  table.render({
    elem: '#table-lj',
   data:newdata, // 此处为静态模拟数据，实际使用时需换成真实接口
    defaultToolbar: '',
    toolbar: '#toolBarDemo1',
    cols: [function(){
      var arr = [
        {field:'index', title:'#',},
        {field:'id', title:'分类ID',},
        {field:'catename', title:'分类名称', },
        {field:'icon', title:'图标class',toolbar:'#imgTpl', },
        {field:'sort_num', title:'权重', } ,
        {title:'操作',toolbar: `#toolBarDemo2`, } ,
      ];
      
      // 初始化筛选状态
      var local = layui.data('table-filter-test'); // 获取对应的本地记录
      layui.each(arr, function(index, item){
        if(item.field in local){
          item.hide = local[item.field];
        }
      });
      return arr;
    }() ],  
    done: function(){
      // 记录筛选状态
      var that = this;
      that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
        var input = $(this).prev()[0];
        // 此处表名可任意定义
        layui.data('table-filter-test', {
          key: input.name
          ,value: input.checked
        })
      });
    }
    
  });
  $('.layui-table-box').on('click','#delbtn',function(){
    axios.get('ydd_cate/del',{params:{id:$(this).attr('data-id')}})
    .then((res) => {
      // console.log(res);
      if(res.data.errno===1000){
        layer.msg(res.data.errmsg)
        return
      }
      $(this).parents('tr').remove()
      layer.msg('删除成功')
      rendercate()
    })
    })
    //编辑
  $('.layui-table-box').on('click','#editbtn',function(){
  const id = $(this).attr('data-id')
  openList(id)
getUpDown()


  })
  //新增
  function openList(type) {
     layer.open({
     type: 1,
     area: '850px',
     resize: false,
     shadeClose: true,
     title: type === 'add' ? '添加分类' : '修改分类',
     content:
      `<form class="layui-form" lay-filter="filter-test-layer" id="addOrEdit" lay-filter="addOrEdit">
      <div class="layui-form-item">
       <label class="layui-form-label" lay-verify><i>*</i>分类名称</label>
       <div class="layui-input-block">
       <input type="text" name="catename" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
       </div>
      </div>
      <div class="layui-form-item">
       <label class="layui-form-label" lay-verify><i>*</i>图标class</label>
       <div class="layui-input-block">
       <input type="text" name="icon" lay-verify="required" placeholder="请输入class名" autocomplete="off" class="layui-input secinp">  <a href="https://fontawesome.com.cn/v4/icons-ui/" target="_blank" id = 'askip'>具体参见fontawesome图标库</a> 
       </div>
       <div class="layui-form-item"> <div class="layui-input-inline">
       <label class="layui-form-label" lay-verify>排序大小</label>
       <button type="button" class="layui-btn layui-btn-primary layui-btn-sm inc"><i class="layui-icon layui-icon-addition"></i></button>
       <input type="text" name="sort_num" value="10" class="layui-input num">
       <button type="button" class="layui-btn layui-btn-primary layui-btn-sm dec"><i class="layui-icon layui-icon-subtraction"></i></button>
     </div>  </div>
    
      </form>`,
     btn: ['确认', '取消'],
     btn1: async function (index) {
   if($('[name="catename"]').val()!==''&& $('[name="icon"]').val()!==''){
    const form = layui.form
    let data = form.val('filter-test-layer');
  

    // console.log(data);
    let url = type==='add'?'ydd_cate/add':'ydd_cate/update'
       data = type==='add'?data:{...data,id:type} 
  const res = await axios.post(url,data)
    // console.log(res);
    rendercate()
   }else{
   return layer.msg('请填写完整信息')
   }
      layer.close(index)
     },
     anim: 5
     })
    }
    function getUpDown(){
      const incBtn = $(".inc");
      const decBtn = $(".dec");
      const numInput = $(".num");
      // 绑定加号的click事件
      incBtn.on("click", function () {
        numInput.val(parseInt(numInput.val()) + 1); // 数量加1
      });
      // 绑定减号的click事件
      decBtn.on("click", function () {
        let num = parseInt(numInput.val());
        num = num > 1 ? num - 1 : 1; // 数量减1，不小于1
        numInput.val(num);
      });
    }
  $('#addItem').on('click',function(){
    openList('add')
    getUpDown()

  })
    let flag = true;
      $('#formChange').on('click',function(){
      if(flag){
        $('#form-lj').hide();
        $('#formChange i').css('transform', 'rotate(180deg)')
        flag = false;
      }else{
        $('#form-lj').show();
        $('#formChange i').css('transform', 'rotate(0deg)')
        flag = true;
      }
      })
      $('#refresh').on('click',function(){
           location.reload()
        // table.reload('table-lj', {
        //   where: { // 传递数据异步请求时携带的字段
        //    data: data.data
        //   }
          
        // })
      }) 

})
}
rendercate()
function renderPage(count){
  laypage.render({
    elem: 'page-box',
    theme: '#1E9FFF',
    count,
    limits:[10,20,40,50,100],
    curr:query.page,
    limit:query.limit,
    groups:5,
    prev:'<i class="fa fa-angle-left"></i>',
    next:'<i class="fa fa-angle-right"></i>',
    layout:['count','limit','prev', 'page', 'next','skip'],
    jump: function(obj, first){
      //obj包含了当前分页的所有参数，比如：
     // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      //console.log(obj.limit); //得到每页显示的条数
      query.page=obj.curr
        query.limit=obj.limit
      //首次不执行
      if(!first){
        //do something
        rendercate()
      }
    }
  });
}


//搜索

$('#search').on('click',function(e){
  e.preventDefault()
 
query.catename= $('[name="title"]').val()
rendercate()

  })
  //重置
  $('#reset').on('click',function(){
    location.reload()
})


});

